<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CodeCraft - 数字工具创意平台</title>
  <!-- 引入外部资源 -->
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- 配置Tailwind自定义主题 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#3B82F6', // 主色调：亮蓝色（技术感+包容性）
            python: '#3776AB', // Python专属色
            java: '#007396',   // Java专属色
            mysql: '#00758F',  // MySQL专属色
            excel: '#217346',  // Excel专属色
            web: '#F06292',    // 前端专属色
            neutral: '#F8FAFC', // 中性背景色
            dark: '#1E293B',   // 深色文本
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-gradient {
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
      }
      .tech-card-active {
        transform: scale(1.05);
        box-shadow: 0 10px 25px rgba(59, 130, 246, 0.15);
      }
    }
  </style>
</head>

<body class="bg-white text-dark">
  <!-- 导航栏 -->
  <header id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300 bg-white/95 backdrop-blur-sm shadow-sm">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <!-- Logo -->
      <a href="#" class="flex items-center gap-2">
        <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary to-blue-400 flex items-center justify-center">
          <i class="fa fa-cube text-white text-xl"></i>
        </div>
        <span class="text-xl font-bold bg-gradient-to-r from-primary to-blue-500 text-gradient">CodeCraft</span>
      </a>
      
      <!-- 导航菜单 - 桌面端 -->
      <nav class="hidden md:flex items-center gap-8">
        <a href="#" class="font-medium text-primary border-b-2 border-primary pb-1">首页</a>
        <a href="#tech" class="font-medium hover:text-primary transition-colors">技术领域</a>
        <a href="#tools" class="font-medium hover:text-primary transition-colors">工具商城</a>
        <a href="#creative" class="font-medium hover:text-primary transition-colors">创意对接</a>
        <a href="#about" class="font-medium hover:text-primary transition-colors">关于我们</a>
      </nav>
      
      <!-- 登录/注册按钮 -->
      <div class="flex items-center gap-4">
        <a href="#login" class="hidden md:block px-4 py-2 text-primary border border-primary rounded-lg hover:bg-primary/5 transition-colors">登录</a>
        <a href="#register" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors shadow-md hover:shadow-lg">免费加入</a>
        
        <!-- 移动端菜单按钮 -->
        <button id="menuBtn" class="md:hidden text-dark text-xl">
          <i class="fa fa-bars"></i>
        </button>
      </div>
    </div>
    
    <!-- 移动端菜单 -->
    <div id="mobileMenu" class="md:hidden hidden bg-white border-t">
      <div class="container mx-auto px-4 py-3 flex flex-col gap-3">
        <a href="#" class="py-2 font-medium text-primary">首页</a>
        <a href="#tech" class="py-2 font-medium hover:text-primary">技术领域</a>
        <a href="#tools" class="py-2 font-medium hover:text-primary">工具商城</a>
        <a href="#creative" class="py-2 font-medium hover:text-primary">创意对接</a>
        <a href="#about" class="py-2 font-medium hover:text-primary">关于我们</a>
        <a href="#login" class="py-2 font-medium hover:text-primary">登录</a>
      </div>
    </div>
  </header>

  <main>
    <!-- 1. Banner区 - 核心价值传递 -->
    <section class="pt-32 pb-20 md:pt-40 md:pb-32 bg-gradient-to-br from-blue-50 to-indigo-50">
      <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row items-center gap-10">
          <!-- 文字内容 -->
          <div class="md:w-1/2 space-y-6">
            <h5 class="text-primary font-medium">数字工具创意平台</h5>
            <h1 class="text-[clamp(2rem,5vw,3.5rem)] font-bold leading-tight">
              用代码创造实用工具<br>
              <span class="bg-gradient-to-r from-python to-primary text-gradient">从Python开始，不止于Python</span>
            </h1>
            <p class="text-lg text-gray-600 max-w-lg">
              这里是程序员与需求者的对接站：学习编程、获取工具、定制系统、创意变现。以Python为核心，辐射多领域技术解决方案。
            </p>
            <div class="flex flex-wrap gap-4 pt-4">
              <a href="#tech" class="px-8 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-all shadow-lg hover:shadow-xl">
                探索技术领域 <i class="fa fa-arrow-right ml-2"></i>
              </a>
              <a href="#tools" class="px-8 py-3 bg-white text-primary border border-primary rounded-lg hover:bg-primary/5 transition-all">
                浏览工具商城
              </a>
            </div>
            
            <!-- 信任背书 -->
            <div class="pt-6 flex items-center gap-2 text-gray-500">
              <div class="flex -space-x-2">
                <img src="https://picsum.photos/id/1001/40/40" alt="用户头像" class="w-8 h-8 rounded-full border-2 border-white">
                <img src="https://picsum.photos/id/1002/40/40" alt="用户头像" class="w-8 h-8 rounded-full border-2 border-white">
                <img src="https://picsum.photos/id/1003/40/40" alt="用户头像" class="w-8 h-8 rounded-full border-2 border-white">
                <div class="w-8 h-8 rounded-full bg-primary/10 text-primary text-xs flex items-center justify-center border-2 border-white">
                  3k+
                </div>
              </div>
              <span>3000+开发者与用户的共同选择</span>
            </div>
          </div>
          
          <!-- 图片 -->
          <div class="md:w-1/2 relative">
            <div class="absolute -top-5 -left-5 w-20 h-20 bg-python/10 rounded-full"></div>
            <div class="absolute -bottom-5 -right-5 w-32 h-32 bg-web/10 rounded-full"></div>
            <img src="https://picsum.photos/id/180/600/400" alt="多技术融合创意平台" class="rounded-xl shadow-2xl w-full object-cover h-[300px] md:h-[400px] relative z-10">
          </div>
        </div>
      </div>
    </section>

    <!-- 2. 技术领域入口区 - 核心调整点 -->
    <section id="tech" class="py-16 bg-white">
      <div class="container mx-auto px-4">
        <div class="text-center mb-12">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">探索技术领域</h2>
          <p class="text-gray-600 max-w-2xl mx-auto">以Python为核心，辐射多元技术领域，找到适合你的解决方案</p>
        </div>
        
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
          <!-- 核心领域：Python -->
          <div class="tech-card-active bg-white rounded-2xl p-6 border border-python/20 flex flex-col items-center text-center transition-all duration-300">
            <div class="w-16 h-16 bg-python/10 rounded-full flex items-center justify-center mb-4">
              <i class="fa fa-python text-python text-2xl"></i>
            </div>
            <h3 class="font-bold text-lg mb-1">Python</h3>
            <p class="text-sm text-gray-500">核心领域</p>
          </div>
          
          <!-- 扩展领域：Java -->
          <div class="bg-white rounded-2xl p-6 border border-gray-100 flex flex-col items-center text-center hover:border-java/20 hover:shadow-md transition-all duration-300">
            <div class="w-16 h-16 bg-java/10 rounded-full flex items-center justify-center mb-4">
              <i class="fa fa-coffee text-java text-2xl"></i>
            </div>
            <h3 class="font-bold text-lg mb-1">Java</h3>
            <p class="text-sm text-gray-500">扩展中</p>
          </div>
          
          <!-- 扩展领域：MySQL -->
          <div class="bg-white rounded-2xl p-6 border border-gray-100 flex flex-col items-center text-center hover:border-mysql/20 hover:shadow-md transition-all duration-300">
            <div class="w-16 h-16 bg-mysql/10 rounded-full flex items-center justify-center mb-4">
              <i class="fa fa-database text-mysql text-2xl"></i>
            </div>
            <h3 class="font-bold text-lg mb-1">MySQL</h3>
            <p class="text-sm text-gray-500">扩展中</p>
          </div>
          
          <!-- 扩展领域：Excel -->
          <div class="bg-white rounded-2xl p-6 border border-gray-100 flex flex-col items-center text-center hover:border-excel/20 hover:shadow-md transition-all duration-300">
            <div class="w-16 h-16 bg-excel/10 rounded-full flex items-center justify-center mb-4">
              <i class="fa fa-table text-excel text-2xl"></i>
            </div>
            <h3 class="font-bold text-lg mb-1">Excel</h3>
            <p class="text-sm text-gray-500">扩展中</p>
          </div>
          
          <!-- 扩展领域：前端开发 -->
          <div class="bg-white rounded-2xl p-6 border border-gray-100 flex flex-col items-center text-center hover:border-web/20 hover:shadow-md transition-all duration-300">
            <div class="w-16 h-16 bg-web/10 rounded-full flex items-center justify-center mb-4">
              <i class="fa fa-code text-web text-2xl"></i>
            </div>
            <h3 class="font-bold text-lg mb-1">前端开发</h3>
            <p class="text-sm text-gray-500">扩展中</p>
          </div>
        </div>
        
        <!-- Python核心内容预览 -->
        <div class="mt-16 bg-neutral rounded-2xl p-8">
          <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
            <div>
              <h3 class="text-2xl font-bold flex items-center gap-2">
                <span class="w-8 h-8 bg-python/10 rounded-full flex items-center justify-center">
                  <i class="fa fa-python text-python"></i>
                </span>
                Python 精选内容
              </h3>
              <p class="text-gray-600">我们的核心领域，提供从入门到变现的全链路服务</p>
            </div>
            <a href="#" class="mt-4 md:mt-0 text-primary font-medium hover:underline">查看全部 <i class="fa fa-angle-right ml-1"></i></a>
          </div>
          
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- 学习资源 -->
            <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
              <div class="w-12 h-12 bg-python/10 rounded-lg flex items-center justify-center mb-4">
                <i class="fa fa-graduation-cap text-python"></i>
              </div>
              <h4 class="font-bold text-lg mb-2">学习路径</h4>
              <p class="text-gray-600 text-sm mb-4">从基础语法到实战工具开发，30天做出第一个产品</p>
              <ul class="text-sm space-y-2 mb-4">
                <li class="flex items-center gap-2 text-gray-600">
                  <i class="fa fa-check text-green-500 text-xs"></i> 50+实战课程
                </li>
                <li class="flex items-center gap-2 text-gray-600">
                  <i class="fa fa-check text-green-500 text-xs"></i> 10+成品工具开发
                </li>
              </ul>
              <a href="#" class="text-python text-sm font-medium hover:underline">开始学习 →</a>
            </div>
            
            <!-- 工具资源 -->
            <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
              <div class="w-12 h-12 bg-python/10 rounded-lg flex items-center justify-center mb-4">
                <i class="fa fa-wrench text-python"></i>
              </div>
              <h4 class="font-bold text-lg mb-2">实用工具</h4>
              <p class="text-gray-600 text-sm mb-4">批量处理、数据爬取、自动化办公等高效工具</p>
              <ul class="text-sm space-y-2 mb-4">
                <li class="flex items-center gap-2 text-gray-600">
                  <i class="fa fa-check text-green-500 text-xs"></i> 30+精选工具
                </li>
                <li class="flex items-center gap-2 text-gray-600">
                  <i class="fa fa-check text-green-500 text-xs"></i> 持续更新中
                </li>
              </ul>
              <a href="#" class="text-python text-sm font-medium hover:underline">浏览工具 →</a>
            </div>
            
            <!-- 变现资源 -->
            <div class="bg-white rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow">
              <div class="w-12 h-12 bg-python/10 rounded-lg flex items-center justify-center mb-4">
                <i class="fa fa-money text-python"></i>
              </div>
              <h4 class="font-bold text-lg mb-2">变现渠道</h4>
              <p class="text-gray-600 text-sm mb-4">接单技巧、工具销售、定制服务等变现指南</p>
              <ul class="text-sm space-y-2 mb-4">
                <li class="flex items-center gap-2 text-gray-600">
                  <i class="fa fa-check text-green-500 text-xs"></i> 接单案例拆解
                </li>
                <li class="flex items-center gap-2 text-gray-600">
                  <i class="fa fa-check text-green-500 text-xs"></i> 定价策略指导
                </li>
              </ul>
              <a href="#" class="text-python text-sm font-medium hover:underline">了解变现 →</a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 3. 核心服务区 - 统一服务模式 -->
    <section class="py-16 bg-neutral">
      <div class="container mx-auto px-4">
        <div class="text-center mb-12">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">我们的核心服务</h2>
          <p class="text-gray-600 max-w-2xl mx-auto">无论哪个技术领域，都能享受一致的优质服务体验</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <!-- 服务1：学习成长 -->
          <div class="bg-white rounded-2xl p-8 hover:shadow-lg transition-shadow">
            <div class="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center mb-6">
              <i class="fa fa-book text-primary text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold mb-3">学习成长</h3>
            <p class="text-gray-600 mb-6">从零基础到实战高手的阶梯式课程，每个领域都有清晰的学习路径和实战项目</p>
            <a href="#" class="inline-flex items-center text-primary font-medium hover:underline">
              浏览全部课程 <i class="fa fa-long-arrow-right ml-2"></i>
            </a>
          </div>
          
          <!-- 服务2：工具商城 -->
          <div class="bg-white rounded-2xl p-8 hover:shadow-lg transition-shadow">
            <div class="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center mb-6">
              <i class="fa fa-shopping-bag text-primary text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold mb-3">工具商城</h3>
            <p class="text-gray-600 mb-6">各领域实用工具、源码、模板，支持免费试用，会员享专属折扣</p>
            <a href="#tools" class="inline-flex items-center text-primary font-medium hover:underline">
              逛工具商城 <i class="fa fa-long-arrow-right ml-2"></i>
            </a>
          </div>
          
          <!-- 服务3：创意对接 -->
          <div class="bg-white rounded-2xl p-8 hover:shadow-lg transition-shadow">
            <div class="w-14 h-14 bg-primary/10 rounded-xl flex items-center justify-center mb-6">
              <i class="fa fa-handshake-o text-primary text-2xl"></i>
            </div>
            <h3 class="text-xl font-bold mb-3">创意对接</h3>
            <p class="text-gray-600 mb-6">发布需求、定制开发、创意变现，连接开发者与需求者的桥梁</p>
            <a href="#creative" class="inline-flex items-center text-primary font-medium hover:underline">
              发布需求 <i class="fa fa-long-arrow-right ml-2"></i>
            </a>
          </div>
        </div>
      </div>
    </section>

    <!-- 4. 会员特权区 - 统一会员体系 -->
    <section class="py-16 bg-white">
      <div class="container mx-auto px-4">
        <div class="text-center mb-12">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">会员特权，全领域通用</h2>
          <p class="text-gray-600 max-w-2xl mx-auto">一次加入，享受所有技术领域的会员权益，性价比更高</p>
        </div>
        
        <div class="max-w-4xl mx-auto">
          <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-gray-100">
            <div class="grid grid-cols-1 md:grid-cols-2">
              <!-- 免费用户 -->
              <div class="p-8 border-b md:border-b-0 md:border-r border-gray-100">
                <h3 class="text-xl font-bold mb-6 flex items-center">
                  <i class="fa fa-user-o text-gray-400 mr-2"></i> 普通用户
                </h3>
                <ul class="space-y-4">
                  <li class="flex items-start">
                    <i class="fa fa-check text-green-500 mt-1 mr-3"></i>
                    <span>各领域基础教程</span>
                  </li>
                  <li class="flex items-start">
                    <i class="fa fa-check text-green-500 mt-1 mr-3"></i>
                    <span>5款免费工具下载</span>
                  </li>
                  <li class="flex items-start text-gray-400">
                    <i class="fa fa-times text-gray-300 mt-1 mr-3"></i>
                    <span>进阶课程与实战项目</span>
                  </li>
                  <li class="flex items-start text-gray-400">
                    <i class="fa fa-times text-gray-300 mt-1 mr-3"></i>
                    <span>工具购买折扣与免费下载</span>
                  </li>
                  <li class="flex items-start text-gray-400">
                    <i class="fa fa-times text-gray-300 mt-1 mr-3"></i>
                    <span>定制服务优惠</span>
                  </li>
                </ul>
              </div>
              
              <!-- 会员用户 -->
              <div class="p-8 bg-gradient-to-br from-primary/5 to-blue-50">
                <div class="flex justify-between items-center mb-6">
                  <h3 class="text-xl font-bold flex items-center">
                    <i class="fa fa-diamond text-primary mr-2"></i> 创意会员
                  </h3>
                  <span class="bg-primary text-white text-sm px-3 py-1 rounded-full">12.9元/月</span>
                </div>
                <ul class="space-y-4">
                  <li class="flex items-start">
                    <i class="fa fa-check text-primary mt-1 mr-3"></i>
                    <span>全领域所有课程（100+节）</span>
                  </li>
                  <li class="flex items-start">
                    <i class="fa fa-check text-primary mt-1 mr-3"></i>
                    <span>20款精选工具免费下载</span>
                  </li>
                  <li class="flex items-start">
                    <i class="fa fa-check text-primary mt-1 mr-3"></i>
                    <span>工具购买享7折优惠</span>
                  </li>
                  <li class="flex items-start">
                    <i class="fa fa-check text-primary mt-1 mr-3"></i>
                    <span>定制服务减免80元</span>
                  </li>
                  <li class="flex items-start">
                    <i class="fa fa-check text-primary mt-1 mr-3"></i>
                    <span>优先参与新领域内测</span>
                  </li>
                </ul>
                <a href="#register" class="mt-8 block w-full py-3 bg-primary text-white text-center rounded-lg hover:bg-primary/90 transition-colors shadow-md">
                  立即开通会员
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 5. 案例展示区 - 跨领域案例 -->
    <section class="py-16 bg-neutral">
      <div class="container mx-auto px-4">
        <div class="text-center mb-12">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4">跨领域创意案例</h2>
          <p class="text-gray-600 max-w-2xl mx-auto">看看不同技术领域如何解决实际问题，创造价值</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <!-- 案例1：Python -->
          <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
            <div class="h-48 overflow-hidden">
              <img src="https://picsum.photos/id/180/600/300" alt="Excel批量处理工具" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500">
            </div>
            <div class="p-6">
              <div class="flex items-center gap-2 mb-3">
                <span class="bg-python/10 text-python text-xs px-2 py-1 rounded">Python</span>
                <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded">办公效率</span>
              </div>
              <h3 class="font-bold text-lg mb-2">Excel批量处理工具</h3>
              <p class="text-gray-600 text-sm mb-4">
                李会计用Python工具每天批量合并50+表格，自动生成报表，错误率从15%降到0
              </p>
              <div class="flex items-center gap-3">
                <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-8 h-8 rounded-full">
                <span class="text-sm text-gray-500">李会计 · 某贸易公司</span>
              </div>
            </div>
          </div>
          
          <!-- 案例2：Python+MySQL -->
          <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
            <div class="h-48 overflow-hidden">
              <img src="https://picsum.photos/id/48/600/300" alt="客户管理系统" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500">
            </div>
            <div class="p-6">
              <div class="flex items-center gap-2 mb-3">
                <span class="bg-python/10 text-python text-xs px-2 py-1 rounded">Python</span>
                <span class="bg-mysql/10 text-mysql text-xs px-2 py-1 rounded">MySQL</span>
              </div>
              <h3 class="font-bold text-lg mb-2">小型客户管理系统</h3>
              <p class="text-gray-600 text-sm mb-4">
                王经理用Python+MySQL搭建客户管理系统，客户跟进效率提升40%，获公司采纳
              </p>
              <div class="flex items-center gap-3">
                <img src="https://picsum.photos/id/1012/40/40" alt="用户头像" class="w-8 h-8 rounded-full">
                <span class="text-sm text-gray-500">王经理 · 销售团队</span>
              </div>
            </div>
          </div>
          
          <!-- 案例3：Excel+Python -->
          <div class="bg-white rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow">
            <div class="h-48 overflow-hidden">
              <img src="https://picsum.photos/id/160/600/300" alt="Excel自动化报表" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500">
            </div>
            <div class="p-6">
              <div class="flex items-center gap-2 mb-3">
                <span class="bg-excel/10 text-excel text-xs px-2 py-1 rounded">Excel</span>
                <span class="bg-python/10 text-python text-xs px-2 py-1 rounded">Python</span>
              </div>
              <h3 class="font-bold text-lg mb-2">自动化报表系统</h3>
              <p class="text-gray-600 text-sm mb-4">
                张分析师结合Excel与Python，实现报表自动更新，每周节省6小时手动操作时间
              </p>
              <div class="flex items-center gap-3">
                <img src="https://picsum.photos/id/1025/40/40" alt="用户头像" class="w-8 h-8 rounded-full">
                <span class="text-sm text-gray-500">张分析师 · 数据部门</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 6. 行动召唤区 -->
    <section class="py-20 bg-gradient-to-r from-primary to-blue-600">
      <div class="container mx-auto px-4 text-center">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-white mb-6">
          加入数字工具创意平台，开启技术变现之旅
        </h2>
        <p class="text-white/80 max-w-2xl mx-auto mb-10 text-lg">
          注册即送7天会员体验，全领域课程与工具免费试用，探索适合你的技术方向
        </p>
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
          <a href="#register" class="px-8 py-4 bg-white text-primary rounded-lg font-medium hover:bg-gray-100 transition-colors shadow-lg">
            立即注册，免费体验
          </a>
          <a href="#about" class="px-8 py-4 bg-transparent text-white border border-white rounded-lg font-medium hover:bg-white/10 transition-colors">
            了解更多
          </a>
        </div>
      </div>
    </section>
  </main>

  <!-- 页脚 -->
  <footer class="bg-dark text-white/70 py-12">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
        <div>
          <div class="flex items-center gap-2 mb-4">
            <div class="w-10 h-10 rounded-lg bg-white flex items-center justify-center">
              <i class="fa fa-cube text-primary text-xl"></i>
            </div>
            <span class="text-xl font-bold text-white">CodeCraft</span>
          </div>
          <p class="text-sm">
            以Python为核心的数字工具创意平台，连接技术与需求，让代码创造实用价值
          </p>
        </div>
        
        <div>
          <h4 class="text-white font-bold mb-4">技术领域</h4>
          <ul class="space-y-2 text-sm">
            <li><a href="#" class="hover:text-white transition-colors">Python</a></li>
            <li><a href="#" class="hover:text-white transition-colors">Java</a></li>
            <li><a href="#" class="hover:text-white transition-colors">MySQL</a></li>
            <li><a href="#" class="hover:text-white transition-colors">Excel</a></li>
            <li><a href="#" class="hover:text-white transition-colors">前端开发</a></li>
          </ul>
        </div>
        
        <div>
          <h4 class="text-white font-bold mb-4">平台服务</h4>
          <ul class="space-y-2 text-sm">
            <li><a href="#" class="hover:text-white transition-colors">学习中心</a></li>
            <li><a href="#" class="hover:text-white transition-colors">工具商城</a></li>
            <li><a href="#" class="hover:text-white transition-colors">创意对接</a></li>
            <li><a href="#" class="hover:text-white transition-colors">会员说明</a></li>
          </ul>
        </div>
        
        <div>
          <h4 class="text-white font-bold mb-4">联系我们</h4>
          <ul class="space-y-2 text-sm">
            <li class="flex items-center gap-2">
              <i class="fa fa-envelope"></i>
              <span>contact@codecraft.com</span>
            </li>
            <li class="flex items-center gap-2">
              <i class="fa fa-weixin"></i>
              <span>CodeCraft创意平台</span>
            </li>
          </ul>
          <div class="mt-4">
            <img src="https://picsum.photos/id/237/80/80" alt="微信公众号" class="w-20 h-20 rounded">
          </div>
        </div>
      </div>
      
      <div class="border-t border-white/10 pt-8 text-sm text-center">
        <p>© 2023 CodeCraft 版权所有 | 数字工具创意平台，让技术创造实用价值</p>
      </div>
    </div>
  </footer>

  <!-- 交互脚本 -->
  <script>
    // 导航栏滚动效果
    const navbar = document.getElementById('navbar');
    window.addEventListener('scroll', () => {
      if (window.scrollY > 50) {
        navbar.classList.add('py-2', 'shadow');
        navbar.classList.remove('py-3');
      } else {
        navbar.classList.add('py-3');
        navbar.classList.remove('py-2', 'shadow');
      }
    });
    
    // 移动端菜单切换
    const menuBtn = document.getElementById('menuBtn');
    const mobileMenu = document.getElementById('mobileMenu');
    menuBtn.addEventListener('click', () => {
      mobileMenu.classList.toggle('hidden');
      menuBtn.innerHTML = mobileMenu.classList.contains('hidden') 
        ? '<i class="fa fa-bars"></i>' 
        : '<i class="fa fa-times"></i>';
    });
    
    // 平滑滚动
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function(e) {
        e.preventDefault();
        const targetId = this.getAttribute('href');
        if (targetId === '#') return;
        
        const targetElement = document.querySelector(targetId);
        if (targetElement) {
          window.scrollTo({
            top: targetElement.offsetTop - 80,
            behavior: 'smooth'
          });
          
          // 关闭移动端菜单
          if (!mobileMenu.classList.contains('hidden')) {
            mobileMenu.classList.add('hidden');
            menuBtn.innerHTML = '<i class="fa fa-bars"></i>';
          }
        }
      });
    });
  </script>
</body>
</html>
